<template>
  <van-nav-bar title="联系人" />
  <ul class="main">
    <li v-for="item in dataList" :key="item.id">
      <div
        class="box"
        v-if="this.$store.state.user.profile.user_id === item.user_id"
        @click="handleGoToTalk(item.cover_user_id, item.cover_user_name)"
      >
        <van-image
          style="float: left"
          round
          width="3.5rem"
          height="100%"
          :src="item.cover_user_avatar"
        />
        <div>
          <p class="p1">{{ item.cover_user_name }}</p>
        </div>
      </div>
      <div
        class="box"
        v-if="this.$store.state.user.profile.user_id === item.cover_user_id"
        @click="handleGoToTalk(item.user_id, item.user_name)"
      >
        <van-image
          style="float: left"
          round
          width="3.5rem"
          height="100%"
          :src="item.user_avatar"
        />
        <div>
          <p class="p1">{{ item.user_name }}</p>
        </div>
      </div>
      <van-divider />
    </li>
  </ul>
</template>

<script>
import { onMounted, ref } from "vue";
import { getContactList } from "@/api/contact";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
export default {
  name: "Contact",
  setup() {
    const store = useStore();

    const dataList = ref([]);

    const getDataList = () => {
      const query = {
        user_id: store.state.user.profile.user_id,
      };
      getContactList(query)
        .then((res) => {
          dataList.value = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    };

    onMounted(() => {
      getDataList();
    });

    const route = useRouter();

    const handleGoToTalk = (id, name) => {
      route.push("/talk/" + id + "/" + name);
    };

    return {
      dataList,
      handleGoToTalk,
    };
  },
};
</script>

<style scoped lang="less">
.main {
  min-height: calc(100% - 96px);
  background-color: #fff;
  padding: 0 0.8rem;
  margin-bottom: 50px;
  .box {
    height: 3.5rem;
    div {
      float: left;
      .p1 {
        margin: 0;
        line-height: 3rem;
        margin-left: 1.5rem;
      }
    }
  }
}
</style>
